<template>
  <div class="findPwd-page">
    <van-nav-bar title="找回密码" left-arrow @click-left="$router.push('/login')" />
    <van-popup :style="{'min-height': '30%', width: '90%'}" v-model="showpop">
      <div @touchmove.prevent @mousewheel.prevent class="slideverify" v-show="isShowSlide">
        <div id="verifyCodeDemo">
          <p id="picyzm" style="margin:10px"></p>
          <div style="text-align:center;margin-bottom:5px;margin-right:10px;">点击图片刷新</div>
          <van-field
            autocomplete="off"
            v-model="picyzmValue"
            style="text-align:center;"
            placeholder="请输入4位验证码"
          />
          <div style="text-align: center;">
            <van-button style="margin:10px;width:65px;" size="small" @click="showpop = false">取消</van-button>
            <van-button style="margin:10px;width:65px;" size="small" type="info" @click="handleVerify()"
              >验证</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
    <van-form>
      <van-field
        autocomplete="off"
        v-model="phone"
        required
        clearable
        enter
        label="手机号"
        name="phone"
        placeholder="请输入正确的手机号码"
        maxlength="11"
        :rules="[
          {
            required: true,
            message: '请填写验证码'
          }
        ]"
      >
        <template #button>
          <van-button
            v-show="showcount"
            size="small"
            type="info"
            :disabled="disabledStatus"
            @click="sendCode(2)"
            native-type="button"
            >发送验证码</van-button>
          <van-button v-show="!showcount" size="small" type="info" disabled @click="sendCode(2)" native-type="button"
            >{{ count }} s</van-button
          >
        </template>
      </van-field>
      <van-field
        autocomplete="off"
        clearable
        required
        v-model="code"
        name="code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[
          {
            required: true,
            message: '请填写验证码'
          }
        ]"
      />
      <van-field
        autocomplete="off"
        clearable
        required
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码(6-20位)"
        :rules="[
          {required: true, message: '请填写密码'},
          { pattern, message: '密码只能输入6-20位' },
        ]"
      />
      <van-field
        autocomplete="off"
        clearable
        required
        v-model="confirmPwd"
        type="password"
        name="confirmPwd"
        label="确认密码"
        placeholder="请再次输入密码(6-20位)"
        :rules="[
          {required: true, message: '请再次填写密码'},
          {pattern, message: '密码只能输入6-20位' },
         ]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
      </div>
    </van-form>

    <div style="margin-top: 88px;">
      <van-divider
        :style="{color: '#FF252F', borderColor: '#FF252F', padding: '0 68px', fontWeight: 'bold', marginTop: '36px'}"
        >温馨提示</van-divider
      >
      <div class="notice_content">
        {{
          `更换手机号、忘记手机号、手机丢失等原因导致无法找回登录密码。请您添加客服的微信号：${service_number}，拨打客服的微信电话，让客服人员协助您找回密码。`
        }}
        <van-button type="info" size="mini" @click.stop="copyServiceNumber">复制客服微信号</van-button>
      </div>
    </div>
    <van-popup round :close-on-click-overlay="false" v-model:show="showPopup" bind:close="onClose">
      <!-- <verCode ref="slideblock" @popFUNC="popFUNC"></verCode> -->
      <slide-verify
      :l="42"
      :r="10"
      :w="210"
      :h="155"
      @success="onSuccess"
      slider-text="向右滑动"
    ></slide-verify>
    </van-popup>
  </div>
</template>

<script>
import {Toast} from 'vant'
import {GVerify} from '@/utils/gVerify.js'
import SlideVerify from '@/components/slideImg' //引入
import verCode from '@/components/verCode' //引入
export default {
  name: 'findPwd',
  components: {
    SlideVerify,
    verCode
  },
  data() {
    return {
      pattern: /^.{6,20}$/,
      showPopup: false,
      isShowSlide: false,
      showpop: false,
      showcount: true,
      count: '',
      timer: null,
      phone: '',
      password: '',
      confirmPwd: '',
      code: '',
      disabled: true,
      verifyCode: null,
      picyzmValue: '',
      service_number: '13790143381'
    }
  },
  computed: {
    disabledStatus() {
      let result
      if (this.phone && this.phone.length === 11) {
        result = !this.disabled
      } else {
        result = this.disabled
      }
      return result
    }
  },

  methods: {
    copyServiceNumber() {
      this.$copyText(this.service_number).then(
        function(e) {
          Toast('复制成功')
        },
        function(e) {
          Toast('复制出错')
        }
      )
    },
    hideSlide() {
      setTimeout(() => {
        this.isShowSlide = false
      }, 500)
    },
    //验证码
    creatGVerify() {
      //初始化验证码
      this.verifyCode = new GVerify({
        id: 'picyzm',
        type: 'blend'
      })
    },

    handleVerify() {
      var res = this.verifyCode.validate(this.picyzmValue)
      if (res) {
        this.sendSmsCode()
      } else {
        alert('验证码错误')
      }
    },
    sendSmsCode() {
      setTimeout(() => {
        this.showpop = false
        this.getQode()
      }, 500)
    },
    async getQode() {
      // 请求参数
      const TIME_COUNT = 60
      const params = {phone: this.phone, type: 2}
      const res = await this.$api.user.reqSendCode(params)

      if (res.code === 200) {
        Toast(res.data)
        if (!this.timer) {
          this.count = TIME_COUNT
          this.showcount = false

          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.showcount = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      } else {
        Toast(res.msg)
      }
    },
    sendCode(index) {
       this.getQode()
      // this.showPopup = true
    },
    popFUNC() {
      this.showPopup = false
      this.getQode()
    },
    onSuccess() {
      this.showPopup = false
      this.getQode()
    },

    async onSubmit() {
      if (this.phone && this.password && this.confirmPwd && this.password === this.confirmPwd && this.code) {
        const params = {
          account: this.phone,
          code: this.code,
          password: this.$Base64.encode(this.$md5(this.password) + this.$md5('jinpin888'))
        }
        const res = await this.$api.user.reqResetPwd(params)
        if (res.code === 200) {
          Toast(res.data)
          await this.$router.push('/login')
        } else {
          Toast(res.msg)
        }
      } else {
        Toast('输入有异常, 请检查输入内容')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.findPwd-page {
  width: 100%;
  box-sizing: border-box;
  .notice_content {
    line-height: 1.6em;
    letter-spacing: 1.1px;
    font-weight: 500;
    text-align: justify;
    padding: 0 10px;
    font-size: 14px;
    text-indent: 2em;
  }
}
</style>
